<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-select v-model="selectOptions.query" placeholder="请选择" @change="currentSelChange">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

        <!--<el-form-item>-->
          <!--<el-input :placeholder="selectOptions.query" v-model="selectOptions.keywords"></el-input>-->
        <!--</el-form-item>-->
        <el-form-item>
          <el-input :placeholder="selectOptions.query" v-model="selectOptions.keywords" v-if="selectOptions.query != 'area_name'" @keyup.enter.native="doSearch"></el-input>
          <select v-model="selectOptions.keywords" style="width: 170px;height: 35px;border-radius: 5px;font-size: 18px;" @change="doSearch" v-else>
            <option :value="item" v-for="(item, index) in areaName">{{ item }}</option>
          </select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="doSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="maps" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
              style="width: 100%;" element-loading-text="玩命请求中。。。">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="80">
      </el-table-column>
      <el-table-column label="ID" width="100" prop="id">
      </el-table-column>
      <el-table-column prop="farm_id" label="农场名" width="180" :formatter="mapName">
      </el-table-column>

      <el-table-column  label="区域名">
        <template slot-scope="scope">
          <span>{{ scope.row.area_name }}</span>
        </template>
      </el-table-column>
      <el-table-column  label="地块名">
      <template slot-scope="scope">
        <span>{{ scope.row.name }}</span>
      </template>
      </el-table-column>

      <el-table-column  label="面积（单位平米）">
        <template slot-scope="scope">
          <span>{{ scope.row.size }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        @current-change="currentPageChange"
        :page-size="30"
        layout="prev, pager, next, jumper"
        :total="total" style="float:right;" :current-page="parseInt(selectOptions.page)">
      </el-pagination>
      <span style="float: right;margin-top: 6px;margin-right: 5px">共 {{total}} 条数据</span>
    </el-col>

    <!--新增界面-->
    <el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
      <el-form :model="addForm" label-width="80px" ref="addForm">
        <el-form-item label="区块" prop="name">
          <template>
            <el-select v-model="addForm.area_name" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.area_name"
                :label="item.area_name"
                :value="item.area_name">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="addForm.name" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>

  </section>
</template>

<script type="text/ecmascript-6">
  import util from '../../util'
	import { apiTree } from '../../apiTree'

  export default {
    data() {
      return {
        options: [
          {value: 'area_name', label: '区域名'},
          {value: 'id', label: '土地id'}
        ],
        area_name: '',
        maps: [],
        total: 0,
        editFormRules: {
          name: [
            {required: true, message: '请输入姓名', trigger: 'blur'}
          ]
        },
        listLoading: false,
        sels: [], // 列表选中列
        editFormVisible: false, // 编辑界面是否显示
        editLoading: false,
        selectOptions: {
          page: this.$route.query.page !== undefined ? this.$route.query.page : 1,
          query: this.$route.query.query !== undefined ? this.$route.query.query : '',
          keywords: this.$route.query.keywords !== undefined ? this.$route.query.keywords : ''
        },
        areaName: [],
        // 编辑界面数据
        editForm: {
          id: 0,
          name: '',
          sex: -1,
          age: 0,
          birth: '',
          addr: ''
        },
        // 新增界面是否显示
        addFormVisible: false,
        addLoading: false,
        // 新增界面数据
        addForm: {
          name: '',
          area_name: ''
        }
      }
    },
    methods: {
      // 农场名称
      mapName: function (row, column) {
        return row.farm_id === '1' ? '枫泾农场' : '未知农场'
      },
      // 获取土地区块
      getCategory: function () {
        apiTree('map/index', 'field/getAreaName').then((res) => {
          this.options = res.d.data
        })
      },
      // 下拉框变化
      currentSelChange() {
        if (this.selectOptions.query === 'area_name') {
          this.showAreaNmae = true
          this.getAreaName()
        } else {
          this.selectOptions.keywords = ''
          this.showAreaNmae = false
        }
      },
      getAreaName() {
        this.areaName = []
        apiTree('map/index', 'field/getAreaName').then((res) => {
          if (res.s === 1) {
            res.d.data.forEach((item) => {
              this.areaName.push(item.area_name)
            })
          }
        })
      },
      currentPageChange(val) {
        this.selectOptions.page = val
        this.$router.push({path: this.$route.path, query: this.selectOptions})
      },
      doSearch() {
        if (this.selectOptions.query === 'area_name' && util.isEmpty(this.selectOptions.keywords)) {
          return;
        }
        if (this.selectOptions.query) {
          this.$router.push({path: this.$route.path, query: this.selectOptions})
        }
      },
      selsChange(val) {
        this.sels = val
      },
      // 获取用户列表
      getMaps() {
        let para = this.$route.query
        if (util.isEmptyObject(para)) {
          this.selectOptions = {
            page: 1,
            query: '',
            keywords: ''
          }
        }
        this.listLoading = true
        apiTree('map/index', 'map/index',para).then((res) => {
          this.total = res.d.total_num
          this.maps = res.d.data
          this.listLoading = false
        })
      }
    },
    mounted() {
      this.getMaps()
    },
    watch: {
      $route: 'getMaps'
    }
  }

</script>

<style scoped>

</style>
